<template>
  <div>
    <div class="top">
      <router-link to="/"><van-icon name="arrow-left" /></router-link>
      <h3>商品详情</h3>
      <van-icon name="share-o" />
    </div>
    <div id="contents">
      <div>
        <mydeBanner />
      </div>
      <div id="content">
        <h3>{{ obj.goodsName }}</h3>
        <p>货号：{{ obj.goodsitemNO }}</p>
        <span>￥{{ obj.goodsPrice }}</span>
      </div>
      <div>
        <mySelects />
      </div>
      <div id="details">
        <h3>细节展示</h3>
        <div>
          <p>购买需知</p>
          <p>结账注意是否可以选择促销活动</p>
          <p>满499包邮</p>
          <p>鞋盒破损情况，请联系店铺</p>
          <p>请勿一单，单款，单尺码，下单数量超过3件！避免造成</p>
          <p>因无店铺可以满足订单库存而导致订单无法发出！</p>
          <p>由于个人问题产生的退货，需自行承担运费</p>
          <p>如需售后问题请及时联系客服人员</p>
          <p>客服工作在线时间10:30-19:00</p>
          <p>(如有紧急问题请致电：1854815092-17648212340</p>
        </div>
        <img :src="obj.details">
      </div>
      <mydeFooter />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
import mySelects from "./select.vue";
import mydeFooter from "./detFooter.vue";
import mydeBanner from "./detBanner.vue";
export default {
  name: "detail",
  components: {
    mySelects,
    mydeFooter,
    mydeBanner,
  },
  data() {
    return {
      //   obj: this.$route.query.obj,
      obj: JSON.parse(this.$route.query.obj),
    };
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 0.44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 999;
}
#content {
  width: 100%;
  height: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 0.15rem;
}
#content > p {
  font-size: 0.125rem;
}
#content > span {
  color: #f01626;
}
#contents {
  padding-top: 0.4rem;
  padding-bottom: 0.55rem;
}
#details>img{
  width: 100%;
}
#details p{
  margin: .1rem .1rem;
  font-size: .14rem;
}
#details h3{
  margin-left: .1rem;
}
</style>